import React from "react";
import "./category-selector.scss";
import Product from "@/service/product-service.jsx";
import Mutils from "@/utils/index.jsx";

const _product = new Product();
const _mm = new Mutils();

class CategorySelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstCategoryList: [],
      firstCategoryId: 0,
      secondCategoryList: [],
      secondCategoryId: 0
    };
  }
  componentDidMount() {
    this.loadFirstCategory();
  }
   componentWillReceiveProps(nextProps){
     let categoryIdChange = this.props.categoryId !== nextProps.categoryId,
          parentCategoryIdChange = this.props.parentCategoryId !== nextProps.parentCategoryId;
      if(!categoryIdChange && !parentCategoryIdChange) return;
    if(nextProps.parentCategoryId === 0){
      this.setState({
        firstCategoryId:nextProps.categoryId
      })
    }else{
      this.setState({
        firstCategoryId:nextProps.parentCategoryId,
        secondCategoryId:nextProps.categoryId
      },() => {
        parentCategoryIdChange && this.loadSecondCategory();
      })
    }
  }
  // 加载一级分类
  loadFirstCategory() {
    _product.getCategoryList().then(
      res => {
        this.setState({
          firstCategoryList: res.data
        });
      },
      err => {
        _mm.errorTips(err);
      }
    );
  }
  loadSecondCategory() {
    _product.getCategoryList(this.state.firstCategoryId).then(
      res => {
        this.setState({
          secondCategoryList: res.data
        });
      },
      err => {
        _mm.errorTips(err);
      }
    );
  }
  // 选择一级分类，加载二级分类
  onFirstCategoryChange(e) {
    if(this.props.readOnly) return;
    let firstCategoryId = e.target.value || 0;
    this.setState(
      {
        firstCategoryId,
        secondCategoryId: 0,
        secondCategoryList: []
      },
      () => {
        this.loadSecondCategory();
        this.onPropsCategoryChange();
      }
    );
  }
  onSecondCategoryChange(e){
    if(this.props.readOnly) return;
	let secondCategoryId = e.target.value || 0;
    this.setState(
      {
        secondCategoryId
      },
      () => {
        this.onPropsCategoryChange();
      }
    );
  }
  // 向父组件传递选中的结果
  onPropsCategoryChange() {
	let categoryChangable = typeof this.props.onCategoryChange === 'function';
	if(this.state.secondCategoryId){
		categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId);
	}else {
		categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId,0);
	}
  }
  render() {
    return (
      <div className="col-sm-10">
        <select
          name="fcategory"
          id="fcategory"
          className="form-control cate-select"
          value={this.state.firstCategoryId}
          onChange={e => this.onFirstCategoryChange(e)}
          readOnly={this.props.readOnly}
        >
          <option value="">请选择一级分类</option>
          {this.state.firstCategoryList.map(v => (
            <option value={v.id} key={v.id}>
              {v.name}
            </option>
          ))}
        </select>
        {this.state.secondCategoryList.length ? (
          <select
            name="scategory"
            id="scategory"
            className="form-control cate-select"
            value={this.state.secondCategoryId}
            onChange={e => this.onSecondCategoryChange(e)}
            readOnly={this.props.readOnly}
          >
            <option value="">请选择二级分类</option>
            {this.state.secondCategoryList.map(v => (
              <option value={v.id} key={v.id}>
                {v.name}
              </option>
            ))}
          </select>
        ) : null}
      </div>
    );
  }
}
export default CategorySelector;
